element |
您所在的位置：网站首页 › element ui 教程 › element |
element
|
目录前言基本使用源码实现最后前言大家好，今天主要比较简单的了解下clickoutside指令的作用，主要作用是自己手动实现类似下拉的组件，想要点击空白隐藏下拉框，可以使用该指令，看下element-u... 目录前言基本使用源码实现最后前言大家好，今天主要比较简单的了解下clickoutside指令的作用，主要作用是自己手动实现类似下拉的组件，想要点击空白隐藏下拉框，可以使用该指令，看下element-ui怎么实现的。 基本使用点击div，closeBox方法不会执行，点击空白才执行 import Clickoutside from 'element-ui/src/utils/clickoutside' export default { directives: { Clickoutside }, data() { return { isShowBox: true } }, methods: { closeBox() { this.isShowBox = false; } } }; 源码实现 在document元素上注册'mousedown'和'mouseup'事件,mouseup时会执行使用了该指令元素上的documentHandler方法documentHandler方法里判断点击的元素是否为使用了指令的元素，不是就执行closeBox的方法 import vue from 'vue'; import { on } from 'element-ui/src/utils/dom'; const nodeList = []; const ctx = '@@clickoutsideContext'; let startClick; let seed = 0; on(document, 'mousedown', e => (startClick = e)); on(document, 'mouseup', e => { nodeList.forEach(node => node[ctx].documentHandler(e, startClick)); }); function createDocumentHandler(el, binding, vnode) { return function(mouseup = {}, mousedown = {}) { if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target || (vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.target)))) return; if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) { vnode.context[el[ctx].methodName](); } else { el[ctx].bindingFn && el[ctx].bindingFn(); } }; } /** * v-clickoutside * @desc 点击元素外面才会触发的事件 * @example * ```vue * * ``` */ export default { bind(el, binding, vnode) { nodeList.push(el); const id = seed++; el[ctx] = { id, documentHandler: createDocumentHandler(el, binding, vnode), methodName: binding.expression, bindingFn: binding.value }; }, update(el, binding, vnode) { el[ctx].documentHandler = createDocumentHandler(el, binding, vnode); el[ctx].methodName = binding.expression; el[ctx].bindingFn = binding.value; }, unbind(el) { let len = nodeList.length; for (let i = 0; i < len; i++) { if (nodeList[i][ctx].id === el[ctx].id) { nodeList.splice(i, 1); break; } } delete el[ctx]; } }; 最后多看源码，才能提高效率，以上就是element-ui中的clickoutside点击空白隐藏元素的详细内容，更多关于element-ui clickoutside空白隐藏的资料请关注我们其它相关文章！ |
【本文地址】
今日新闻 |
推荐新闻 |